<!-- 删除提示框 -->
<template>
	<view class="model-box" v-if="show">
		<view class="del-box">
			<view class="tip-text">{{tip}}</view>
			<view class="btns-box">
				<view class="btn" :class="[rightColor ? '' : 'submit']" @click="cancelClick">{{cancelText}}</view>
				<view class="btn" :class="[rightColor ? 'submit' : '']" @click="confirmClick">{{confirmText}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"delete-model",
		props: {
			// 是否展示模态框
			show: {
				type: Boolean,
				default: false
			},
			tip: {
				type: String,
				default: '是否确认删除？'
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			confirmText: {
				type: String,
				default: '确认'
			},
			// 是否右边高亮，默认右边，false 时为左边
			rightColor: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {};
		},
		methods: {
			// 删除按钮的点击事件
			cancelClick() {
				this.$emit('cancel')
			},
			// 确认按钮的点击事件
			confirmClick() {
				this.$emit('confirm')
			}
		}
	}
</script>

<style lang="scss">
	.model-box {
		width: 750rpx;
		height: 100vh;
		background-color: rgba(0, 0, 0, .4);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		.del-box {
			min-width: 446rpx;
			max-width: 520rpx;
			height: 262rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 233rpx auto 0;
			background-color: #FFF;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #141418;
			text-align: center;
			padding: 60rpx 20rpx 0;
			position: relative;
			overflow: hidden;
			.btns-box {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 60rpx;
				display: flex;
				justify-content: space-between;
				.btn {
					width: 50%;
					height: 100%;
					line-height: 60rpx;
					text-align: center;
					background: #E9E9E9;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
				.submit {
					background: #00C9B1;
					color: #FFF;
				}
			}
		}
	}
</style>
